<template>
  <scroll-view :scroll-top="0" scroll-y="true" class="full">
    <view class="container border-box">
      <view class="row justify-content-center">
        <view class="col-12 col-sm-8 col-md-6 col-xl-4 py_lg">
          <view class="py_lg">
            <view class="justify_center">
              <!-- <u-image
                height="80px"
                width="80px"
                :src="userState.avatar"
                shape="circle"
              ></u-image> -->

              <u-avatar
                src=""
                fontSize="22"
              ></u-avatar>
            </view>
            <view class="justify_center pt_sm">
              <view class="h3">{{ $t('center.greeting') }}</view>
            </view>
          </view>

          <view class="justify_between align-items_center">
            <view class="h5">{{ $t('center.bots') }}</view>
            <view>
              <!-- <u-button
                type="primary"
                size="small"
                class="px_md"
                :text="$t('center.upgrade')"
                shape="circle"
                @click="navigateTo('payment')"
              ></u-button
            > -->
            </view>
          </view>

          <scroll-view
            class="scroll-view-show model-list my_default"
            :scroll-left="0"
            :scroll-x="true"
            :show-scrollbar="true"
          >
            <view class="model" v-for="item in models" :key="item.name">
              <u-image
                width="30px"
                height="30px"
                :src="`/static/images/${item.icon}@2x.png`"
              ></u-image>
              <view class="heading h5 mt_xs">{{ item.name }} </view>
              <view class="subheading color_light singe-line">{{
                item.description
              }}</view>
            </view>
          </scroll-view>

          <Card
            size="sm"
            bgColor="#f7f7f7"
            :title="$t('center.settings.heading')"
          >
            <u-cell-group class="list">
              <u-cell
                class="list-item"
                icon="setting-fill"
                @click="navigateTo('modifyMobile')"
                :title="$t('center.settings.phone')"
                :value="userState.phone"
                isLink
              ></u-cell>
              <u-cell
                class="list-item"
                icon="setting-fill"
                @click="navigateTo('modifyEmail')"
                :title="$t('center.settings.email')"
                :value="userState.email"
                isLink
              ></u-cell>
              <!-- <u-cell
                class="list-item"
                icon="setting-fill"
                :title="$t('center.settings.subscription')"
                @click="handleIntroduction"
                isLink
              ></u-cell> -->
              <u-cell
                class="list-item"
                icon="setting-fill"
                @click="navigateTo('instruct')"
                :title="$t('center.settings.instructions')"
                isLink
              ></u-cell>
              <u-cell
                class="list-item"
                icon="setting-fill"
                @click="handleLanguage"
                :title="$t('center.settings.language')"
                :value="locale"
                isLink
              ></u-cell>
            </u-cell-group>
          </Card>

          <view class="py_default">
            <u-button
              type="primary"
              @click="logout"
              :text="$t('center.loginOut')"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance } from 'vue';
import { Card } from '@/components';
import { useUser } from './hooks';
import { navigateTo } from '@/utils/uni';
import { languages } from '@/model/index';
import useUserStore from '@/store/modules/user';
import { onLoad } from '@dcloudio/uni-app';
import { login } from '@/api/user.api';
import i18n from '@/i18n/index';
import { useNavigationBar } from '@/pages/hooks';
import popup from '@/components/PopupIntroduction/index';
import { aiModels } from '@/model/index';

export default defineComponent({
  name: 'Center',
  components: {
    Card,
  },
  setup() {
    useNavigationBar('center');
    const { userState, logout } = useUser();
    const userStore = useUserStore();

    const locale = computed(() => {
      const { label } = languages.find(item => {
        return item.name === uni.getLocale();
      });
      return label;
    });

    function handleLanguage() {
      uni.showActionSheet({
        itemList: languages.map(item => item.label),
        success: res => {
          const locale = languages[res.tapIndex].name;
          uni.setLocale(locale);

          i18n.global.locale.value = locale;
        },
      });
    }

    const instance = getCurrentInstance();
    function handleIntroduction() {
      popup.open(instance);
    }

    return {
      userState,
      logout,
      navigateTo,
      locale,
      handleLanguage,
      handleIntroduction,
      models: [...aiModels],
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.scroll {
  height: 100%;
}
.list {
  .list-item {
    // display: block;
    margin-top: 2px;
    background: $white-color;
    border-radius: map-get($radii, sm);
  }
}

.model-list {
  white-space: nowrap;
  width: 100%;
  .model {
    display: inline-block;
    width: 180px;
    background: #f7f7f7;
    border-radius: map-get($radii, sm);
    padding: map-get($spaces, sm);
  }
  .model + .model {
    margin-left: map-get($spaces, xs);
  }
  .subheading {
    display: block;
    font-size: 12px;
    word-wrap: break-word;
    word-break: break-all;
  }
}

.language {
  width: 220px;
  .language-btn {
    border-radius: unset;
  }
}


</style>
